<template>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="mode" />
    </template>
  </van-cell>
  <UserCardList :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList || userList.length < 1" description="数据为空"/>
</template>
<script setup lang="ts">
import {onMounted, ref, watchEffect} from "vue";
import myAxios from "../plugins/myAxios.js";
import {showFailToast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import {useRouter} from "vue-router";

const userList = ref([]);

const mode = ref<Boolean>(false);

const loading = ref<Boolean>(true);

const loadData = async () => {
  let userListData;
  const num = 12;
  // loading.value = true;
  if (!mode.value){
    userListData = await myAxios.get('/user/recommend',{
      params: {
        pageSize: 8,
        pageNum: 1,
      }
    })
        .then(function (response:any) {
          return response?.data?.records;
        })
        .catch(function (error:any) {
          console.log('/user/recommend', error);
          showFailToast('请求失败');
        })
  }else {
    userListData = await myAxios.get('/user/match',{
      params: {
        num
      }
    })
        .then(function (response:any) {
          return response?.data;
        })
        .catch(function (error:any) {
          console.log('/user/match', error);
          showFailToast('请求失败');
        })
  }

  if (userListData){
    userListData.forEach((user:any) => {
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
}

watchEffect(()=>{
  loadData();
})
const router = useRouter();
onMounted(async () => {
  const res = await myAxios.get('/user/current');
  if (res.code !== 0){
    router.replace('/user/login');
    return;
  }else {
    return;
  }
})
</script>

<style scoped>

</style>